﻿<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<title>cardistry</title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/iconfont.css" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>



<div class="header">
	<a href="" class="h-logo"></a>
	<ul class="h-nav">
		<li><a href="index.html"><span class="icon">&#xe600;</span>首页</a></li>
		<li><a href="square.html"><span class="icon">&#xe607;</span>广场</a></li>
		<!-- <li><a href=""><span class="icon">&#xe603;</span>挑战</a></li> -->
		<li  class="on"><a href="learn.html"><span class="icon">&#xe604;</span>教学</a></li>
		<!-- <li><a href=""><span class="icon">&#xe606;</span>纸牌</a></li> -->
	</ul>
	<div class="h-func">
		<a href=""><span class="icon">&#xe61b;</span>登陆</a>
		<a href=""><span class="icon">&#xe61c;</span>注册</a>
		<a href=""><span class="icon">&#xe623;</span></a>
	</div>
</div>
<div class="content">
	<div class="album clearfix">
		<div class="album-choose">	 
			 <a href="" class="on"><span class="icon">&#xe628;</span>全部专辑</a>
			 <a href=""><span class="icon">&#xe628;</span>初级教学</a>
			 <a href=""><span class="icon">&#xe628;</span>进阶教学</a>
		</div>
		<div class="album-btn">
			<a href="" class="icon album-btn-prev">&#xe62b;</a>
			<a href="" class="icon album-btn-next">&#xe62a;</a>
		</div>
		<div class="album-cont clearfix">
			<ul>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>

				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/150.png" />
						<strong>system</strong>
						<span>dan and dave</span>
					</a>
				</li>

			</ul>
		</div>
	</div>
</div>
<!-- 详情 -->

<div class="popup popup-ablumdes">
	<div class="popup-inner">
			<div class="ablumdes-title">
				<h1>System</h1>
				<p>Artist : dan and dave</p>
			</div>
			<div class="ablumdes-left">
				
				<div class="ablumdes-media">
					<embed src="http://player.youku.com/player.php/sid/XNzAzOTQ3Njc2/v.swf" allowFullScreen="true" quality="high" width="374" height="300" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
				</div>
				<div class="ablumdes-info">
					<h2>副标题</h2>
					<p>Cardistry与Card Flourishing在本质上来说并没有什么区别，“Card Flourishing”其实是最原始的术语，但是经过发展后，现在的“Card Flourishing”变体发展到一个更细、更专业的方向（也就是花式），不再能适合Cardistry的意思。</p>
					<h2>副标题</h2>
					<p>Cardistry与Card Flourishing在本质上来说并没有什么区别，“Card Flourishing”其实是最原始的术语，但是经过发展后，现在的“Card Flourishing”变体发展到一个更细、更专业的方向（也就是花式），不再能适合Cardistry的意思。</p>
					<h2>副标题</h2>
					<p>Cardistry与Card Flourishing在本质上来说并没有什么区别，“Card Flourishing”其实是最原始的术语，但是经过发展后，现在的“Card Flourishing”变体发展到一个更细、更专业的方向（也就是花式），不再能适合Cardistry的意思。</p>
					<h2>副标题</h2>
					<p>Cardistry与Card Flourishing在本质上来说并没有什么区别，“Card Flourishing”其实是最原始的术语，但是经过发展后，现在的“Card Flourishing”变体发展到一个更细、更专业的方向（也就是花式），不再能适合Cardistry的意思。</p>
				</div>
			</div>
			<div class="ablumdes-right">
				<div class="ablumdes-download clearfix">
					<ul>
						<li>
							<span class="ablumdes-download-icon icon">&#xe614;</span>
							<strong>
								<span>sdfesdf</span>
								<em>(提取码)</em>
							</strong>
							<p class="first">system.mov</p>
							<p>http://pan.baidu.com/sjlsflsjf</p>
							<a href="" class="ablumdes-download-btn"><span class="icon" style="top:2px;">&#xe60e;</span>Download</a>
						</li>
						<li>
							<span class="ablumdes-download-icon icon">&#xe614;</span>
							<strong>
								<span>会员专享</span>
								<em>(提取码)</em>
							</strong>
							<p class="first">system.mov</p>
							<p>http://pan.baidu.com/sjlsflsjf</p>
							<a href="" class="ablumdes-download-btn"><span class="icon">&#xe615;</span>立即成为会员，获取下载特权</a>
						</li>
					</ul>
				</div>
			</div>	
	</div>
	<a href="javascript:void(0)" class="popup-close icon">&#xe61e;</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$('.album-cont a').click(function(){
		$('.popup-ablumdes').show();
		$('html').css('overflow','hidden');
		return false;
	})
	$('.popup-close').click(function(){
		$('.popup').hide();
		$('html').css('overflow','auto');
		return false;
	})
</script>
</body>
</html>